import {Button, Form, Input, Upload} from 'antd';
import TextArea from "antd/es/input/TextArea";
import {useState} from "react";
import {UploadOutlined} from "@ant-design/icons";
import {sendMail} from "../../../Request/api";
const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};

const initialValues = {
    sender: localStorage.getItem("token") || "",
    // 其他表单项的初始值
};

const validateMessages = {
    required: '${label} 需要填写!',
    types: {
        email: '${label} 不是合法邮箱!',
    },
};



const App = (props) => {
    const [form] = Form.useForm();
    const [fileList, setFileList] = useState([]);

    const handleFileChange = (info) => {
        setFileList(info.fileList);
    };

    const onFinish = (values) => {
        props.setStatus("sending")
        const formData = new FormData();
        if (fileList && fileList.length > 0) {
            formData.append('multipartFile', fileList[0].originFileObj);
        }
        formData.append('sender', values.sender);
        formData.append('receiver', values.receiver);
        formData.append('title', values.title);
        formData.append('message', values.message)
        sendMail(formData).then(res => {
            if (res.message === "success") {
                props.setStatus("success")
                props.setMsg(res.data.message)
            } else {
                props.setStatus("error")
            }
        })

    };

    return(
        <Form
            {...layout}
            name="nest-messages"
            onFinish={onFinish}
            form={form}
            initialValues={initialValues}
            style={{
                maxWidth: 600,
            }}
            validateMessages={validateMessages}
        >
            <Form.Item
                name={"receiver"}
                label="接收方邮箱"
                rules={[
                    {
                        type:"email"
                    }
                ]}
            >
                <Input></Input>
            </Form.Item>
            <Form.Item
                name={"sender"}
                label="发送方邮箱"
                rules={[
                    {
                        type: 'email',
                    },
                ]}
            >
                <Input disabled={true}/>
            </Form.Item>
            <Form.Item name={"title"} label="发送标题">
                <Input disabled={false}/>
            </Form.Item>
            <Form.Item name={"message"} label="发送内容">
                <TextArea
                    showCount
                    maxLength={100}
                    style={{ height: 120, resize: 'none' }}
                    placeholder="填写发送内容"
                />
            </Form.Item>
            <Form.Item name={"multipartFile"} label={"附件"}>
                <Upload onChange={handleFileChange} fileList={fileList}>
                    <Button icon={<UploadOutlined />}>Click to Upload</Button>
                </Upload>
            </Form.Item>
            <Form.Item
                wrapperCol={{
                    ...layout.wrapperCol,
                    offset: 8,
                }}
            >
                <Button type="primary" htmlType="submit">
                    发送
                </Button>
            </Form.Item>
        </Form>
    );
}
export default App;